var selected = 'images/tab_selected_blue.png';
var unselected = 'images/tab_blue.png';
var selectedColor = '#fff';
var unselectedColor = '#aaa';

var resultsTab = Ti.UI.createView({
	height: 38,
	width: 150,
	top: 0,
	left: 7,
	backgroundImage: selected
});
var resultsLabel = Ti.UI.createLabel({
	title: 'User Groups',
	font: {fontWeight: 'bold'},
	color: selectedColor
});
resultsTab.add(resultsLabel);
var resultsPanel = Ti.UI.createView({
	//height: 390,
	//width: 320,
	top: 0,
	left: 0,
	bottom: 0,
	right: 0,
	layout: 'vertical'
});

var mapTab = Ti.UI.createView({
	height: 38,
	width: 150,
	top: 0,
	left: 163,
	backgroundImage: unselected
});
var mapLabel = Ti.UI.createLabel({
	title: 'Map',
	font: {fontWeight: 'bold'},
	color: unselectedColor
});
mapTab.add(mapLabel);
var mapPanel = Ti.UI.createView({
	//height: 390,
	//width: 320,
	top: 0,
	bottom: 0,
	left: 0,
	right: 0
});

resultsTab.addEventListener('click', ShowResults);

mapTab.addEventListener('click', ShowMap);

function ShowResults(){
	resultsTab.backgroundImage = selected;
	resultsLabel.color = selectedColor;
	resultsPanel.show();
	mapTab.backgroundImage = unselected;
	mapLabel.color = unselectedColor;
	mapPanel.hide();
}

function ShowMap(){
	resultsTab.backgroundImage = unselected;
	resultsLabel.color = unselectedColor;
	resultsPanel.hide();
	mapTab.backgroundImage = selected;
	mapLabel.color = selectedColor;
	mapPanel.show();
}